<template>
    <view class="content">
        <div class="detail-warp">
            <div class="sitem">
                <image :src="data.photo" mode="aspectFill" class="cimages"></image>
                <div class="sinfo">
                    <h1>昵称：{{data.nickname}}</h1>
                    <p>预定时间：{{data.reach_time}} <span class="cor">（早）</span></p>
                    <p>人数：{{data.number}}人</p>
                </div>
            </div>
            <div class="detail-info">
                <p>订单号：5698524586</p>
                <p>下单时间：{{data.order_time}}</p>
                <p>使用时间：{{data.finish_time}}</p>
                <p>联系人：{{data.name}}</p>
                <p>电话：{{data.cellphone}}</p>
                <p>订单状态：{{data.status_name}}</p>
            </div>
        </div>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id : 0,
                data : []
            }
        },
        onLoad(e) {
            this.id = e.order_id;
            this.getData();
        },
        methods: {
            getData() {
                let t = this,
                    param = {};
                param.is_loading = true;
                param.url = 'api/shop/home/order_detail';
                param.data = {};
                param.data.order_id = t.id;
                t.util.requests(param, res => {
                    t.data = res.data.data
                    if( t.data.order_status == 1 ) {
                        t.data.status_name = '待审核';
                    } else if( t.data.order_status == 2 ) {
                        t.data.status_name = '待使用';
                    } else if( t.data.order_status == 3 ) {
                        t.data.status_name = '已取消';
                    } else if( t.data.order_status == 4 ) {
                        t.data.status_name = '满台';
                    } else if( t.data.order_status == 5 ) {
                        t.data.status_name = '已完成';
                    }
                });
            }
        },
    }
</script>
<style>
    .sitem {
        background: #fff;
        padding: 30upx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30upx;
        border-radius: 10upx;
        border-bottom: 1upx solid #e6e6e6;
    }

    .cimages {
        width: 130upx;
        height: 130upx;
        background: #f8f8f8;
        border-radius: 50%;
    }

    .sinfo {
        flex: 1;
        margin-left: 40upx;
        line-height: 2;
    }

    .sinfo h1 {
        font-size: 28upx;
        color: #242424;
        margin-bottom: 10upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .sinfo p {
        font-size: 26upx;
        color: #999;
    }

    .detail-info {
        padding:0 30upx;
    }

    .detail-info p {
        font-size: 26upx;
        color: #333;
        line-height: 2.2;

    }

    .cor {
        font-size: 26upx;
        color: #fc21fc;
    }
</style>
